<!--
 * @Author: Shber
 * @Date: 2024-05-08 15:06:42
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-04 17:20:59
 * @Description: 
-->
<template>
	<view class="login_content">
    <image class="logo" mode="aspectFill" src="/static/logo.png"></image>
		<text class="app_name mt_10">麦芽田供应商</text>

		<view class="login_form mt_50">
			<view class="cell">
        <my-icon :fontSize="56" color="#333" name="myicon-shouji-e650"/>
				<uni-easyinput :inputBorder="false" class="input" type="number" v-model="value" placeholder="请输入手机号码"
				placeholderStyle="font-size:28rpx; color:#999999;"
				>
				</uni-easyinput>
			</view>

			<view class="cell">
        <my-icon :fontSize="56" color="#333" name="myicon-suo-e611"/>
				<uni-easyinput :inputBorder="false" class="input" type="number" v-model="value" placeholder="请输入验证码"
				placeholderStyle="font-size:28rpx; color:#999999;"
				>
				</uni-easyinput>
				<view>
					<text class="send_code" v-if="time === 60" @click="sendCode">获取验证码</text>
					<text class="send_code send_code1" v-else>{{time}}s后重新发送</text>
				</view>
			</view>
			<tm-button class="mt_50" block :round="10" label="登录"></tm-button>
			<text class="login_tip">未注册用户登录默认为麦芽田注册会员</text>
		</view>
	</view>
</template>

<script setup>
  import { reactive, ref } from 'vue'
	import ajax from '@/api'
  import myIcon from '@/components/MyIcon/index.vue'
	let timer = null
	const time = ref(60)
	const value = ref('')
	let requestTest = async()=>{
		let res = await ajax.get('/featurepreh/page')
		info.value = res.data
	}
	// requestTest()

	const sendCode = ()=>{
		clearInterval(timer)
		timer = setInterval(() => {
			time.value -= 1
			if(time.value === 0){
				clearInterval(timer)
				time.value = 60
			}
		}, 100);
	}
   
</script>

<style lang="scss" scoped>
  .logo{display: block; width: 90px; height: 90px; margin: 40px auto 0;}
	.app_name{font-size: 18px; font-weight: 500; color: #333333; display: block; text-align: center;}
	.input{border: none;}
	.cell{position: relative; display: flex; align-items: center; border-bottom: 1px solid #f8f8f9;
		padding: 10px 0;
	}
	.login_form{padding: 0 28px;}
	.mt_50{margin-top: 50px !important;}
	.login_tip{font-size: 12px; color: #999; display: block; text-align: center;}
	.send_code{font-size: 12px; color: #5BACD2;}
	.send_code1{color: #999;}
</style>
<style>
page{background-color: #fff;}
</style>
